<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>快速搭建基于VuePress的简易博客 | 没有好名字</title>
    <meta name="generator" content="VuePress 1.8.0">
    
    <meta name="description" content="">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.1b60b33f.css" as="style"><link rel="preload" href="/assets/js/app.21ddca70.js" as="script"><link rel="preload" href="/assets/js/2.e4b4f7f6.js" as="script"><link rel="preload" href="/assets/js/3.a80949d2.js" as="script"><link rel="prefetch" href="/assets/js/10.dcc67335.js"><link rel="prefetch" href="/assets/js/4.3e476a16.js"><link rel="prefetch" href="/assets/js/5.a0841d5a.js"><link rel="prefetch" href="/assets/js/6.6f9c7b56.js"><link rel="prefetch" href="/assets/js/7.09d1322a.js"><link rel="prefetch" href="/assets/js/8.e5da8c5e.js"><link rel="prefetch" href="/assets/js/9.01a1eef4.js">
    <link rel="stylesheet" href="/assets/css/0.styles.1b60b33f.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">没有好名字</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/diaz-zeng" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/diaz-zeng/diaz-zeng.github.io/issues" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Issues
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/diaz-zeng" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/diaz-zeng/diaz-zeng.github.io/issues" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Issues
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>快速搭建基于VuePress的简易博客</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/33386d/#关于vuepress" class="sidebar-link">关于VuePress</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/pages/33386d/#项目搭建" class="sidebar-link">项目搭建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/33386d/#建立node项目" class="sidebar-link">建立Node项目</a></li><li class="sidebar-sub-header level3"><a href="/pages/33386d/#加入vuepress依赖" class="sidebar-link">加入VuePress依赖</a></li><li class="sidebar-sub-header level3"><a href="/pages/33386d/#写入第一篇文档" class="sidebar-link">写入第一篇文档</a></li></ul></li><li><a href="/pages/33386d/#附加配置" class="sidebar-link">附加配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/33386d/#引入主题及插件依赖" class="sidebar-link">引入主题及插件依赖</a></li><li class="sidebar-sub-header level3"><a href="/pages/33386d/#新建项目配置文件并加入主题配置" class="sidebar-link">新建项目配置文件并加入主题配置</a></li></ul></li><li><a href="/pages/33386d/#部署与自动更新" class="sidebar-link">部署与自动更新</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/33386d/#github-pages" class="sidebar-link">GitHub Pages</a></li><li class="sidebar-sub-header level3"><a href="/pages/33386d/#gitee-pages" class="sidebar-link">Gitee Pages</a></li></ul></li><li><a href="/pages/33386d/#关于目录结构" class="sidebar-link">关于目录结构</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-057748f7><div class="articleInfo" data-v-057748f7><ul class="breadcrumbs" data-v-057748f7><li data-v-057748f7><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-057748f7></a></li> <li data-v-057748f7><a href="/categories/?category=Web%E5%89%8D%E7%AB%AF" title="分类" data-v-057748f7>Web前端</a></li></ul> <div class="info" data-v-057748f7><div title="作者" class="author iconfont icon-touxiang" data-v-057748f7><a href="https://github.com/diaz-zeng" target="_blank" title="作者" class="beLink" data-v-057748f7>Diaz Zeng</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-057748f7><a href="javascript:;" data-v-057748f7>2021-11-08</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">快速搭建基于VuePress的简易博客<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h1 id="快速搭建基于vuepress的简易博客"><a href="#快速搭建基于vuepress的简易博客" class="header-anchor">#</a> 快速搭建基于VuePress的简易博客</h1> <p>本文内容包含两部分：</p> <ol><li>搭建一个基于VuePress的静态页面网站</li> <li>将页面发布到Github Pages和Gitee Pages</li></ol> <h2 id="关于vuepress"><a href="#关于vuepress" class="header-anchor">#</a> 关于VuePress</h2> <p><a href="https://vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">VuePress<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是一个Vue驱动的以Markdown为中心的静态网站生成器。核心是通过编写Markdown文档的方式创建网页，可以让使用者更容易专注于内容本身而非站点的构建上，因此非常适合用来编写博客或是项目文档。当前站点就是基于VuePress发布在Github Pages</p> <h2 id="项目搭建"><a href="#项目搭建" class="header-anchor">#</a> 项目搭建</h2> <p>项目的搭建方式有很多种，最终的目录结构也有所不同，在这里笔者主要是基于官网的方式，再结合上一些额外的配置。</p> <p><strong>主要步骤</strong>：建立空白Node项目 --&gt; 加入VuePress依赖 --&gt;写入第一篇文档</p> <h3 id="建立node项目"><a href="#建立node项目" class="header-anchor">#</a> 建立Node项目</h3> <p>创建一个新的目录</p> <div class="language-bash extra-class"><pre class="language-bash"><code> <span class="token function">mkdir</span> vue-press-demo <span class="token operator">&amp;&amp;</span> <span class="token builtin class-name">cd</span> vue-press-demo
</code></pre></div><p>初始化node项目</p> <div class="language-bash extra-class"><pre class="language-bash"><code> <span class="token function">yarn</span> init <span class="token comment"># npm init</span>
 
</code></pre></div><h3 id="加入vuepress依赖"><a href="#加入vuepress依赖" class="header-anchor">#</a> 加入VuePress依赖</h3> <p>导入VuePress的依赖（官方建议使用开发依赖而非全局依赖）</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> vuepress <span class="token comment"># npm install -D vuepress</span>
</code></pre></div><p>在package.json中加入一些scripts</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;docs:dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="写入第一篇文档"><a href="#写入第一篇文档" class="header-anchor">#</a> 写入第一篇文档</h3> <p>建立 docs目录，后续的所有文档都将存放在此目录下</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">mkdir</span> docs
</code></pre></div><p>在docs目录下创建README.md并写入内容（推荐使用Typora作为文档编辑器）</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token builtin class-name">echo</span> <span class="token string">'# Hello VuePress'</span> <span class="token operator">&gt;</span> docs/README.md
</code></pre></div><p>此时我们的目录结构应该是这样的</p> <div class="language- extra-class"><pre class="language-text"><code>.
├── docs
│   ├── README.md
└── package.json
</code></pre></div><p>启动预览</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> docs:dev <span class="token comment"># npm run docs:dev</span>
</code></pre></div><p>访问 127.0.0.1:8080</p> <p><img src="/assets/img/00.174bad15.png" alt="00"></p> <p>到这里就已经完成了项目的基本配置，更多配置可以参考<a href="https://vuepress.vuejs.org/zh/guide/getting-started.html" target="_blank" rel="noopener noreferrer">快速上手 | VuePress (vuejs.org)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="附加配置"><a href="#附加配置" class="header-anchor">#</a> 附加配置</h2> <p>官方的模版更倾向于用来编写项目文档，并不太适合用于创建个人博客，所以我们还需要针对博客进行一些配置，在这里我引入了主题（<a href="https://doc.xugaoyi.com/" target="_blank" rel="noopener noreferrer">vuepress-theme-vdoing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>），以及一些插件来丰富功能。</p> <h3 id="引入主题及插件依赖"><a href="#引入主题及插件依赖" class="header-anchor">#</a> 引入主题及插件依赖</h3> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> vuepress-theme-vdoing dayjs vuepress-plugin-one-click-copy vuepress-plugin-thirdparty-search vuepress-plugin-zooming
<span class="token comment"># vuepress-theme-vdoing 主题</span>
<span class="token comment"># dayjs 时间日期工具库 https://dayjs.fenxianglu.cn/</span>
<span class="token comment"># vuepress-plugin-one-click-copy 代码块点击复制插件</span>
<span class="token comment"># vuepress-plugin-thirdparty-search 第三方搜索插件</span>
<span class="token comment"># vuepress-plugin-zooming 图片缩放插件</span>
</code></pre></div><h3 id="新建项目配置文件并加入主题配置"><a href="#新建项目配置文件并加入主题配置" class="header-anchor">#</a> 新建项目配置文件并加入主题配置</h3> <p>首先需要在docs目录下建立.vuepress目录</p> <p>接下来所有的项目相关配置以及静态资源都将在这个目录下存放</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">mkdir</span> docs/.vuepress 
</code></pre></div><p>在.vuepress目录下新建config.js，并加入以下内容</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'vdoing'</span><span class="token punctuation">,</span> <span class="token comment">// 使用npm包主题</span>
    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'站点名称'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">markdown</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">toc</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">includeLevel</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lineNumber</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 代码块行号</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">themeConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      	<span class="token comment">// 导航栏配置</span>
        <span class="token literal-property property">nav</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'索引'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'/archives/'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'分类'</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'/categories/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'标签'</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'/tags/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'归档'</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'/archives/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&quot;GitHub&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'https://github.com/diaz-zeng'</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">'_blank'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&quot;Issues&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'https://github.com/diaz-zeng/diaz-zeng.github.io/issues'</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">'_blank'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>

        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）</span>
        <span class="token literal-property property">searchMaxSuggestions</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 搜索结果显示最大数</span>
        <span class="token literal-property property">lastUpdated</span><span class="token operator">:</span> <span class="token string">'上次更新'</span><span class="token punctuation">,</span> <span class="token comment">// 开启更新时间，并配置前缀文字   string | boolean (取值为git提交时间)</span>
        <span class="token literal-property property">docsDir</span><span class="token operator">:</span> <span class="token string">'docs'</span><span class="token punctuation">,</span> <span class="token comment">// 编辑的文件夹</span>
        <span class="token literal-property property">sidebar</span><span class="token operator">:</span> <span class="token string">'structuring'</span><span class="token punctuation">,</span> <span class="token comment">// 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页</span>
        <span class="token literal-property property">author</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'你的名字'</span><span class="token punctuation">,</span> <span class="token comment">// 必需</span>
            <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'你的github或者其他个人主页链接'</span><span class="token punctuation">,</span> <span class="token comment">// 可选的</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">social</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 社交图标，显示于博主信息栏和页脚栏</span>
            <span class="token comment">// iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加</span>
            <span class="token literal-property property">icons</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                    <span class="token literal-property property">iconClass</span><span class="token operator">:</span> <span class="token string">'icon-github'</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'GitHub'</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'https://github.com/diaz-zeng'</span><span class="token punctuation">,</span> <span class="token comment">// 替换成你的github地址或者删除整个icons字段</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 页脚信息</span>
        <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">createYear</span><span class="token operator">:</span> <span class="token number">2021</span><span class="token punctuation">,</span> <span class="token comment">// 博客创建年份</span>
            <span class="token literal-property property">copyrightInfo</span><span class="token operator">:</span>
                <span class="token string">'你的名字 | &lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;MIT License&lt;/a&gt;'</span><span class="token punctuation">,</span> <span class="token comment">// 博客版权信息，支持a标签</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">head</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">[</span>
            <span class="token string">'meta'</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'keywords'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">[</span><span class="token string">'meta'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'theme-color'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'#11a8cd'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 移动浏览器主题颜色</span>

    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用）</span>
        <span class="token punctuation">[</span>
            <span class="token string">'thirdparty-search'</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">thirdparty</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token comment">// 可选，默认 []</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'在MDN中搜索'</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">frontUrl</span><span class="token operator">:</span> <span class="token string">'https://developer.mozilla.org/zh-CN/search?q='</span><span class="token punctuation">,</span> <span class="token comment">// 搜索链接的前面部分</span>
                        <span class="token literal-property property">behindUrl</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 搜索链接的后面部分，可选，默认 ''</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'在Runoob中搜索'</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">frontUrl</span><span class="token operator">:</span> <span class="token string">'https://www.runoob.com/?s='</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'在Vue API中搜索'</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">frontUrl</span><span class="token operator">:</span> <span class="token string">'https://cn.vuejs.org/v2/api/#'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'在Bing中搜索'</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">frontUrl</span><span class="token operator">:</span> <span class="token string">'https://cn.bing.com/search?q='</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'通过百度搜索'</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">frontUrl</span><span class="token operator">:</span> <span class="token string">'https://www.baidu.com/s?wd='</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">[</span>
            <span class="token string">'one-click-copy'</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token comment">// 代码块复制按钮</span>
                <span class="token literal-property property">copySelector</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'div[class*=&quot;language-&quot;] pre'</span><span class="token punctuation">,</span> <span class="token string">'div[class*=&quot;aside-code&quot;] aside'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// String or Array</span>
                <span class="token literal-property property">copyMessage</span><span class="token operator">:</span> <span class="token string">'复制成功'</span><span class="token punctuation">,</span> <span class="token comment">// default is 'Copy successfully and then paste it for use.'</span>
                <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token comment">// prompt message display time.</span>
                <span class="token literal-property property">showInMobile</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// whether to display on the mobile side, default: false.</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">[</span>
            <span class="token string">'vuepress-plugin-zooming'</span><span class="token punctuation">,</span> <span class="token comment">// 放大图片</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">selector</span><span class="token operator">:</span> <span class="token string">'.theme-vdoing-content img:not(.no-zoom)'</span><span class="token punctuation">,</span> <span class="token comment">// 排除class是no-zoom的图片</span>
                <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token literal-property property">bgColor</span><span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0.6)'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">[</span>
            <span class="token string">'@vuepress/last-updated'</span><span class="token punctuation">,</span> <span class="token comment">// &quot;上次更新&quot;时间格式</span>
            <span class="token punctuation">{</span>
                <span class="token function-variable function">transformer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">timestamp<span class="token punctuation">,</span> lang</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        					<span class="token keyword">const</span> dayjs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'dayjs'</span><span class="token punctuation">)</span> <span class="token comment">// https://day.js.org/</span>
        					<span class="token keyword">const</span> utc <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'dayjs/plugin/utc'</span><span class="token punctuation">)</span>
                  <span class="token comment">/*
                   强制使用UTC时间并设置偏移量以固定到东八区
                   否则将会使用服务器本地时间，比如在GitHub Pages上部署时就会使用UTC时
                   偏移量以分钟为单位
                   */</span>
       				 		dayjs<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>utc<span class="token punctuation">)</span>
        					<span class="token keyword">return</span> <span class="token function">dayjs</span><span class="token punctuation">(</span>timestamp<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">utcOffset</span><span class="token punctuation">(</span><span class="token number">480</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY/MM/DD, HH:mm:ss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
    <span class="token punctuation">,</span>
<span class="token punctuation">}</span>

</code></pre></div><p>保存配置后再重启预览</p> <p><img src="/assets/img/01.07e16e85.png" alt="截屏2021-11-12 16.17.33"></p> <p>此时就更像是博客的样子了🤣</p> <h2 id="部署与自动更新"><a href="#部署与自动更新" class="header-anchor">#</a> 部署与自动更新</h2> <p>作为一个资深的白嫖党，让我花钱租服务器是不可能的，正好GitHub和Gitee都有相应的Pages服务用来托管静态页面，对于一个博客来说这就够用了。</p> <h3 id="github-pages"><a href="#github-pages" class="header-anchor">#</a> GitHub Pages</h3> <p>首先要明确项目是要部署在&lt;username&gt;.github.io（作为账户的pages）下还是&lt;username&gt;.github.io/&lt;repo&gt;（作为某个项目的pages）下，如果是作为某个项目的pages进行部署则需要在docs/.vuepress/config.js中修改base字段（Gitee同理）。<a href="https://vuepress.vuejs.org/zh/config/#base" target="_blank" rel="noopener noreferrer">配置 | VuePress (vuejs.org)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">base</span><span class="token operator">:</span><span class="token string">'/你的项目名称/'</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="访问personal-access-tokens-github-com-创建一个新的personal-access-token"><a href="#访问personal-access-tokens-github-com-创建一个新的personal-access-token" class="header-anchor">#</a> 访问<a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer">Personal Access Tokens (github.com)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>创建一个新的Personal Access Token</h4> <p><img src="/assets/img/image-20211112172926463.4d663d92.png" alt="image-20211112172926463"></p> <p>因为我们只需要推送代码，所以我们只需要勾选repo权限即可，过期时间为了方便我就选择了不过期，也可以根据需求自行定义</p> <p><img src="/assets/img/image-20211112173309570.26c533a2.png" alt="image-20211112173309570"></p> <p>将token值妥善保存，之后将无法再看到它</p> <p><img src="/assets/img/image-20211112173626353.34495de1.png" alt="image-20211112173626353"></p> <h4 id="保存令牌到github代码库的settings"><a href="#保存令牌到github代码库的settings" class="header-anchor">#</a> 保存令牌到Github代码库的Settings</h4> <p>打开repo的settings将token加入进去</p> <p><img src="/assets/img/image-20211112174024493.7088602d.png" alt="image-20211112174024493"></p> <p><img src="/assets/img/image-20211112174201525.5da92ffb.png" alt="image-20211112174201525"></p> <p><img src="/assets/img/image-20211112174231023.b39e8c19.png" alt="image-20211112174231023"></p> <h4 id="创建-github-workflows目录及配置文件"><a href="#创建-github-workflows目录及配置文件" class="header-anchor">#</a> 创建.github/workflows目录及配置文件</h4> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">mkdir</span> .github <span class="token operator">&amp;&amp;</span> <span class="token function">mkdir</span> .github/workflows
</code></pre></div><p>在.github/workflows下新建deploy-site.yml并写入：</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy Site
<span class="token comment"># 触发条件：当master分支有更改时</span>
<span class="token key atrule">on</span><span class="token punctuation">:</span>
  <span class="token key atrule">push</span><span class="token punctuation">:</span>
    <span class="token key atrule">branches</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> master <span class="token punctuation">]</span>
  <span class="token key atrule">pull_request</span><span class="token punctuation">:</span>
    <span class="token key atrule">branches</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> master <span class="token punctuation">]</span>

<span class="token key atrule">jobs</span><span class="token punctuation">:</span>
  <span class="token comment"># 部署到GitHub Pages</span>
  <span class="token key atrule">build-and-deploy</span><span class="token punctuation">:</span>
    <span class="token key atrule">runs-on</span><span class="token punctuation">:</span> ubuntu<span class="token punctuation">-</span>latest
    <span class="token key atrule">name</span><span class="token punctuation">:</span> <span class="token string">&quot;build and deploy&quot;</span>

    <span class="token key atrule">steps</span><span class="token punctuation">:</span>
    <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Checkout
      <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/checkout@v2
      
    <span class="token comment"># 安装依赖并打包</span>
    <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Install and build 
      <span class="token key atrule">run</span><span class="token punctuation">:</span> yarn install <span class="token important">&amp;&amp;</span> yarn docs<span class="token punctuation">:</span>build
      
    <span class="token comment"># 部署构建物到指定分支</span>
    <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy 🚀
      <span class="token key atrule">uses</span><span class="token punctuation">:</span> JamesIves/github<span class="token punctuation">-</span>pages<span class="token punctuation">-</span>deploy<span class="token punctuation">-</span>action@4.1.5
      <span class="token key atrule">with</span><span class="token punctuation">:</span>
        <span class="token key atrule">branch</span><span class="token punctuation">:</span> gh<span class="token punctuation">-</span>pages 
        <span class="token key atrule">folder</span><span class="token punctuation">:</span> ./docs/.vuepress/dist 
        <span class="token key atrule">token</span><span class="token punctuation">:</span> $<span class="token punctuation">{</span><span class="token punctuation">{</span>secrets.DEMO_ACCESS_TOKEN<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token comment"># Personal Access Token</span>
</code></pre></div><h4 id="提交代码代码到github以触发构建"><a href="#提交代码代码到github以触发构建" class="header-anchor">#</a> 提交代码代码到GitHub以触发构建</h4> <p><img src="/assets/img/image-20211116160314120.7149f46d.png" alt="image-20211116160314120"></p> <p>此时在远端新生成了一个gh-pages分支</p> <p><img src="/assets/img/image-20211116160500121.2165f5ac.png" alt="image-20211116160500121"></p> <h4 id="修改github代码库的设置以启用pages"><a href="#修改github代码库的设置以启用pages" class="header-anchor">#</a> 修改Github代码库的设置以启用Pages</h4> <p><img src="/assets/img/image-20211116161136399.43cc81d6.png" alt="image-20211116161136399"></p> <h4 id="访问预览"><a href="#访问预览" class="header-anchor">#</a> 访问预览</h4> <p><img src="/assets/img/image-20211116160730638.a30790d1.png" alt="image-20211116160730638"></p> <h3 id="gitee-pages"><a href="#gitee-pages" class="header-anchor">#</a> Gitee Pages</h3> <p>Gitee Pages 其实和Github Pages是非常类似的，之所以要加入Gitee的配置是因为在国内因为众所周知的原因GitHub的访问情况并不是很理想，所以相应的在Gitee做一个镜像来方便访问。但是，有一个很严重的问题，虽然Gitee Pages服务本身不要钱，但是Pages的自动刷新和流水线服务要钱。。。这对于我来说明显是不能接受的😂（土豪请忽略）。</p> <p>所以，我们还是用GitHub的服务来帮助我们部署Gitee Pages（GitHub YYDS！！！👍🏻）</p> <h4 id="创建gitee的access-token"><a href="#创建gitee的access-token" class="header-anchor">#</a> 创建Gitee的Access Token</h4> <p>我们只需要项目的访问权限即可，不需要勾选其他的权限（和GitHub差不多，这一部分加上很大程度是为了让这篇文章看起来很长）。</p> <p><img src="/assets/img/image-20211116162813036.82221939.png" alt="image-20211116162813036"></p> <p>保存好令牌，切记！！！！</p> <p><img src="/assets/img/image-20211116163047900.02fa8954.png" alt="image-20211116163047900"></p> <h4 id="将token及gitee账号密码到保存到github"><a href="#将token及gitee账号密码到保存到github" class="header-anchor">#</a> 将Token及Gitee账号密码到保存到GitHub</h4> <p>保存账号密码是为了使用Action刷新Gitee Pages</p> <p><img src="/assets/img/image-20211116165541694.77b8b0b4.png" alt="image-20211116165541694"></p> <h4 id="修改-github-workflows-deploy-site-yml"><a href="#修改-github-workflows-deploy-site-yml" class="header-anchor">#</a> 修改.github/workflows/deploy-site.yml</h4> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy Site
<span class="token comment"># 触发条件：当master分支有更改时</span>
<span class="token key atrule">on</span><span class="token punctuation">:</span>
  <span class="token key atrule">push</span><span class="token punctuation">:</span>
    <span class="token key atrule">branches</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> master <span class="token punctuation">]</span>
  <span class="token key atrule">pull_request</span><span class="token punctuation">:</span>
    <span class="token key atrule">branches</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> master <span class="token punctuation">]</span>

<span class="token key atrule">jobs</span><span class="token punctuation">:</span>
  <span class="token comment"># 部署到GitHub Pages</span>
  <span class="token key atrule">build-and-deploy</span><span class="token punctuation">:</span>
    <span class="token key atrule">runs-on</span><span class="token punctuation">:</span> ubuntu<span class="token punctuation">-</span>latest
    <span class="token key atrule">name</span><span class="token punctuation">:</span> <span class="token string">&quot;Build and deploy&quot;</span>

    <span class="token key atrule">steps</span><span class="token punctuation">:</span>
    <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Checkout
      <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/checkout@v2
      
    <span class="token comment"># 安装依赖并打包</span>
    <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Install and build 
      <span class="token key atrule">run</span><span class="token punctuation">:</span> yarn install <span class="token important">&amp;&amp;</span> yarn docs<span class="token punctuation">:</span>build
      
    <span class="token comment"># 部署构建物到指定分支</span>
    <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy 🚀
      <span class="token key atrule">uses</span><span class="token punctuation">:</span> JamesIves/github<span class="token punctuation">-</span>pages<span class="token punctuation">-</span>deploy<span class="token punctuation">-</span>action@4.1.5
      <span class="token key atrule">with</span><span class="token punctuation">:</span>
        <span class="token key atrule">branch</span><span class="token punctuation">:</span> gh<span class="token punctuation">-</span>pages 
        <span class="token key atrule">folder</span><span class="token punctuation">:</span> ./docs/.vuepress/dist 
        <span class="token key atrule">token</span><span class="token punctuation">:</span> $<span class="token punctuation">{</span><span class="token punctuation">{</span>secrets.DEMO_ACCESS_TOKEN<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token comment"># Personal Access Token</span>
  <span class="token comment"># 追加如下内容</span>
  <span class="token comment"># 推送构建物到Gitee仓库</span>
  <span class="token key atrule">push-to-gitee</span><span class="token punctuation">:</span>
    <span class="token key atrule">needs</span><span class="token punctuation">:</span> build<span class="token punctuation">-</span>and<span class="token punctuation">-</span>deploy
    <span class="token key atrule">runs-on</span><span class="token punctuation">:</span> ubuntu<span class="token punctuation">-</span>latest
    <span class="token key atrule">name</span><span class="token punctuation">:</span> <span class="token string">&quot;Push to Gitee&quot;</span>
    <span class="token key atrule">steps</span><span class="token punctuation">:</span> 
     <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Checkout
       <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/checkout@v2

    <span class="token comment"># 切换分支到gh-pages</span>
     <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Switch branch
       <span class="token key atrule">run</span><span class="token punctuation">:</span> git fetch <span class="token punctuation">-</span><span class="token punctuation">-</span>unshallow <span class="token important">&amp;&amp;</span> git checkout gh<span class="token punctuation">-</span>pages <span class="token important">&amp;&amp;</span> git pull
       
       <span class="token comment"># 增加这一步是因为如果直接使用URL推送可能会有shallow update not allowed的错误</span>
     <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Add remote
       <span class="token comment"># 替换链接为你自己的Gitee代码库地址</span>
       <span class="token key atrule">run</span><span class="token punctuation">:</span> git remote add gitee https<span class="token punctuation">:</span>//oauth2<span class="token punctuation">:</span>$<span class="token punctuation">{</span><span class="token punctuation">{</span>secrets.GITEE_TOKEN<span class="token punctuation">}</span><span class="token punctuation">}</span>@gitee.com/diaz/vue<span class="token punctuation">-</span>press<span class="token punctuation">-</span>demo.git 

     <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Push to gitee
       <span class="token key atrule">run</span><span class="token punctuation">:</span> git push <span class="token punctuation">-</span>f <span class="token punctuation">-</span><span class="token punctuation">-</span>all gitee
       <span class="token comment"># 如果你只想部署构建物到Gitee就使用如下的配置并在Gitee Pages设置中将Pages分支设置为master</span>
       <span class="token comment"># run: git push -f gitee gh-pages:master</span>
    
    <span class="token comment"># 刷新Gitee Pages（https://github.com/yanglbme/gitee-pages-action）</span>
     <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Refresh Gitee pages
       <span class="token key atrule">uses</span><span class="token punctuation">:</span> yanglbme/gitee<span class="token punctuation">-</span>pages<span class="token punctuation">-</span>action@main
       <span class="token key atrule">with</span><span class="token punctuation">:</span>
        <span class="token key atrule">gitee-username</span><span class="token punctuation">:</span> $<span class="token punctuation">{</span><span class="token punctuation">{</span>secrets.GITEE_USERNAME<span class="token punctuation">}</span><span class="token punctuation">}</span>
        <span class="token key atrule">gitee-password</span><span class="token punctuation">:</span> $<span class="token punctuation">{</span><span class="token punctuation">{</span>secrets.GITEE_PASSWORD<span class="token punctuation">}</span><span class="token punctuation">}</span>
        <span class="token key atrule">gitee-repo</span><span class="token punctuation">:</span> diaz/vue<span class="token punctuation">-</span>press<span class="token punctuation">-</span>demo <span class="token comment"># 仓库名称</span>
        <span class="token key atrule">branch</span><span class="token punctuation">:</span> gh<span class="token punctuation">-</span>pages <span class="token comment"># 存放Pages的分支</span>
        <span class="token comment"># branch: master # 仅部署构建物时使用</span>
</code></pre></div><p>保存并提交代码，然后等待流水线构建</p> <p><img src="/assets/img/image-20211116173354312.c46d02b5.png" alt="image-20211116173354312"></p> <p>失败了不要慌，这是因为我们还没打开Gitee的Pages服务，空代码库是没有这个选项的，但是现在代码已经推送过去了。</p> <h4 id="打开gitee-pages服务"><a href="#打开gitee-pages服务" class="header-anchor">#</a> 打开Gitee Pages服务</h4> <p><img src="/assets/img/image-20211116174001099.428e65c9.png" alt="image-20211116174001099"></p> <p><img src="/assets/img/image-20211116174055300.05478428.png" alt="image-20211116174055300"></p> <p><img src="/assets/img/image-20211116174153210.2a383c74.png" alt="image-20211116174153210"></p> <h4 id="测试配置是否正常"><a href="#测试配置是否正常" class="header-anchor">#</a> 测试配置是否正常</h4> <p>访问看一下</p> <p><img src="/assets/img/image-20211116174622990.2624c1be.png" alt="image-20211116174622990"></p> <p>修改一些内容再次提交测试测试一下Action是否正常</p> <p><img src="/assets/img/image-20211116174759308.b735e6fa.png" alt="image-20211116174759308"></p> <p>内容也已经更新上去了</p> <p><img src="/assets/img/image-20211116175012955.9af2c531.png" alt="image-20211116175012955"></p> <p>到此所有的配置都结束了，这个项目我放在GitHub上了<a href="https://github.com/diaz-zeng/vue-press-demo" target="_blank" rel="noopener noreferrer">diaz-zeng/vue-press-demo: vuepress演示项目 (github.com)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，有需要的可以参考一下。</p> <h2 id="关于目录结构"><a href="#关于目录结构" class="header-anchor">#</a> 关于目录结构</h2> <p>首先晒出我的目录结构</p> <div class="language- extra-class"><pre class="language-text"><code>.
├── .github   (可选，GitHub Actions所需文件)
│   ├── workflows
│   │   └── deploy-site.yml (可选，包含打包、多渠道部署的配置)
├── docs
│   ├── .vuepress (项目配置目录，同官方：https://vuepress.vuejs.org/zh/guide/directory-structure.html#目录结构)
│   │   └── config.js
│   ├── &lt;结构化目录&gt;
|   └── README.md (index.md也是可以的，但是我选择README，因为也可以被GitHub作为项目文档所识别)
└── package.json
</code></pre></div><p>这是我基于vuepress-theme-vdoing 所建议的<a href="https://doc.xugaoyi.com/pages/2f674a/" target="_blank" rel="noopener noreferrer">目录结构<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>进行简化的，本质上所有的文档只要是放在docs目录下都是可以的，没有硬性的规定，但是我还建议遵循<a href="https://doc.xugaoyi.com/pages/33d574/" target="_blank" rel="noopener noreferrer">构建结构化站点的核心配置和约定 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，以方便文档的管理。</p></div></div> <!----> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2025/03/31, 18:36:25</span></div></div> <div class="page-nav-wapper"><!----> <!----></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/" class="router-link-active"><div>
            关于
            <!----></div></a> <span class="date"></span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/86e9e2/"><div>
            分享一下我的弓
            <!----></div></a> <span class="date">03-31</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="https://github.com/diaz-zeng" title="GitHub" target="_blank" class="iconfont icon-github"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2025
    <span>Diaz Zeng </span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.21ddca70.js" defer></script><script src="/assets/js/2.e4b4f7f6.js" defer></script><script src="/assets/js/3.a80949d2.js" defer></script>
  </body>
</html>
